<script setup>
import {ref} from "vue"
import router from "@/router";

const activity = ref('')
const activitySquare = ref('first')
const activityName = ref('')
const gender = ref('')
const shenpi =()=> {
    router.push('/approve/activity')
}
const options =  [
    {
        value: 'beijing',
        label: '北京市',
        children:[{
            value: 'dongcheng',
            label: '东城区'
        }],
    },
    {
        value: 'sichuan',
        label: '四川省',
        children:[{
            value: 'meishan',
            label: '眉山市',
            children: [
                {
                    value: 'pengshan',
                    label: '彭山区',
                },
                {
                    value: 'dongpo',
                    label: '东坡区',
                },
            ],
        }],
    },
];
const tableData = [{
    num:'1',
    name:'huodongmingchenghuodongmingcheng',
    year:'2024年',
    place:'四川省/眉山市/彭山区',
    star:'2024/7/4',
    end:'2024/7/13',
    ori:'2023/05/25',
},
    {
        num:'2',
        name:'huodongmingchenghuodongmingcheng',
        year:'2024年',
        place:'四川省/眉山市/彭山区',
        star:'2024/7/4',
        end:'2024/7/13',
        ori:'2023/05/25',
    },
    {
        num:'3',
        name:'huodongmingchenghuodongmingcheng',
        year:'2024年',
        place:'四川省/眉山市/彭山区',
        star:'2024/7/4',
        end:'2024/7/13',
        ori:'2023/05/25',
    },
];
</script>

<template>
    <div class="Square">
        <el-container>
            <el-header>
                <p class="text-left">活动审批 </p>
            </el-header>

            <el-tabs
                v-model="activitySquare"
                type="border-card"
                class="demo-tabs"
                @tab-click="handleClick"
            >
                <el-tab-pane label="招宣活动" name="first">
                    <el-tabs v-model="state" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="审批中" name="first"></el-tab-pane>
                        <el-tab-pane label="审批通过" name="second"></el-tab-pane>
                        <el-tab-pane label="审批不通过" name="theird"></el-tab-pane>
                    </el-tabs>
                    <!--进行中的活动表单-->
                    <el-form inline>
                        <el-form-item  style="margin-right: 5px">
                            <el-input v-model="activity" placeholder="请输入活动名称查询" style="width: 150px" ></el-input>
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-select placeholder="是否招宣年度" v-model="gender"  >
                                <el-option label="2024年" value="2024"></el-option>
                                <el-option label="2023年" value="2023"></el-option>
                                <el-option label="2022年" value="2022"></el-option>
                                <el-option label="2021年" value="2021"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-cascader :options="options"  placeholder="请选择省/市/区"  />
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-input v-model="activityName" placeholder="请输入姓名/工号查询"  ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="resetParams">重置</el-button>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                            <el-button type="primary" @click="showAddDialog('发布活动计划')" >批量审批</el-button>
                            <el-button type="primary" @click="showAddDialog('发布活动计划')" >导出数据</el-button>
                        </el-form-item>
                    </el-form>
                    <!--            内容表单-->
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column slot="header"  width="50" align="center">
                            <el-checkbox v-model="checked1" size="large" />
                        </el-table-column>
                        <el-table-column prop="num" label="序号" width="55" />
                        <el-table-column prop="name" label="活动名称" width="245" />
                        <el-table-column prop="year" label="招宣年度"  width="80" />
                        <el-table-column prop="place" label="活动区域" width="170"/>
                        <el-table-column prop="star" label="计划开始时间" />
                        <el-table-column prop="end" label="计划结束时间" />
                        <el-table-column prop="ori" label="活动来源" />
                        <el-table-column prop="op" label="操作" width="180">
                            <template #default="{ row }">
                                <el-button  size="mini" @click="shenpi" >审批</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--母校行页面-->
                </el-tab-pane>
                <el-tab-pane label="母校行" name="second">
                    <el-tabs v-model="state" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="审批中" name="first"></el-tab-pane>
                        <el-tab-pane label="审批通过" name="second"></el-tab-pane>
                        <el-tab-pane label="审批不通过" name="theird"></el-tab-pane>
                    </el-tabs>
                    <!--进行中的活动表单-->
                    <el-form inline>
                        <el-form-item  style="margin-right: 5px">
                            <el-input v-model="activity" placeholder="请输入活动名称查询" style="width: 150px" ></el-input>
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-select placeholder="是否招宣年度" v-model="gender"  >
                                <el-option label="2024年" value="2024"></el-option>
                                <el-option label="2023年" value="2023"></el-option>
                                <el-option label="2022年" value="2022"></el-option>
                                <el-option label="2021年" value="2021"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-cascader :options="options"  placeholder="请选择省/市/区"  />
                        </el-form-item>
                        <el-form-item style="margin-right: 5px">
                            <el-input v-model="activityName" placeholder="请输入姓名/工号查询"  ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="resetParams">重置</el-button>
                            <el-button type="primary" @click="getUserList">查询</el-button>
                            <el-button type="primary" @click="showAddDialog('发布活动计划')" >批量审批</el-button>
                            <el-button type="primary" @click="showAddDialog('发布活动计划')" >导出数据</el-button>
                        </el-form-item>
                    </el-form>
                    <!--            内容表单-->
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column slot="header"  width="50" align="center">
                            <el-checkbox v-model="checked1" size="large" />
                        </el-table-column>
                        <el-table-column prop="num" label="序号" width="55" />
                        <el-table-column prop="name" label="活动名称" width="245" />
                        <el-table-column prop="year" label="招宣年度"  width="80" />
                        <el-table-column prop="place" label="活动区域" width="170"/>
                        <el-table-column prop="star" label="计划开始时间" />
                        <el-table-column prop="end" label="计划结束时间" />
                        <el-table-column prop="ori" label="活动来源" />
                        <el-table-column prop="op" label="操作" width="180">
                            <template #default="{ row }">
                                <el-button  size="mini" @click="shenpi1" >审批</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-container>
    </div>
    <!--    分页条-->
    <div class="ye">
        <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="100" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" style="margin-top: 10px; justify-content: flex-end"
        />
    </div>

</template>

<style scoped lang="scss">
.Square {
    height: 100%;
    .demo-tabs {
        min-height: 100%;
        box-sizing: border-box;

        .el-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>